<template>
  <div>
    <h3 style="padding-left: 10px;">项目完成情况-省份</h3>
    <div id="reportProjectProvince"></div>
  </div>
</template>

<script>
import { reqProjectByProvinceReport } from "@/api/report/projectChart";

import Highcharts from "highcharts/highstock";
// Highcharts.setOptions({
//   lang: {
//     resetZoom: "恢复缩放"
//   }
// });
export default {
  props: {
    query: Object
  },
  data() {
    return {
      options: {
        chart: {
          zoomType: "xy"
        },
        title: {
          text: ""
        },
        subtitle: {
          text: ""
        },
        credits: {
          enabled: false
        },
        xAxis: [
          {
            categories: [],
            crosshair: true
          }
        ],
        yAxis: [
          {
            // Primary yAxis
            labels: {
              format: "{value}%",
              style: {
                color: Highcharts.getOptions().colors[2]
              }
            },
            title: {
              text: "完成率",
              style: {
                color: Highcharts.getOptions().colors[2]
              }
            },
            opposite: true
          },
          {
            gridLineWidth: 0,
            title: {
              text: "个数",
              style: {
                color: Highcharts.getOptions().colors[0]
              }
            },
            labels: {
              format: "{value} 个",
              style: {
                color: Highcharts.getOptions().colors[0]
              }
            }
          },
          {
            gridLineWidth: 0,
            title: {
              text: "人数",
              style: {
                color: Highcharts.getOptions().colors[1]
              }
            },
            labels: {
              format: "{value} 人",
              style: {
                color: Highcharts.getOptions().colors[1]
              }
            },
            opposite: true
          }
        ],
        tooltip: {
          shared: true
        },
        // legend: {
        //   layout: "vertical",
        //   align: "left",
        //   x: 80,
        //   verticalAlign: "top",
        //   y: 55,
        //   floating: true,
        //   backgroundColor:
        //     (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
        //     "#FFFFFF"
        // },
        series: [
          {
            name: "分配门店数",
            type: "column",
            yAxis: 1,
            data: [],
            tooltip: {
              valueSuffix: " 个"
            }
          },
          {
            name: "已完成门店数",
            type: "column",
            yAxis: 1,
            data: [],
            tooltip: {
              valueSuffix: " 个"
            }
          },
          {
            name: "门店完成率",
            type: "spline",
            data: [],
            tooltip: {
              valueSuffix: "%"
            }
          },
          {
            name: "已有人员参训门店数",
            type: "column",
            yAxis: 1,
            data: [],
            tooltip: {
              valueSuffix: " 个"
            }
          },
          {
            name: "无人员参训门店数",
            type: "column",
            yAxis: 1,
            data: [],
            tooltip: {
              valueSuffix: " 个"
            }
          },
          {
            name: "分配人数",
            type: "column",
            yAxis: 2,
            data: [],
            tooltip: {
              valueSuffix: " 人"
            }
          },
          {
            name: "已参训人数",
            type: "column",
            yAxis: 2,
            data: [],
            tooltip: {
              valueSuffix: " 人"
            }
          },
          {
            name: "未参训人数",
            type: "column",
            yAxis: 2,
            data: [],
            tooltip: {
              valueSuffix: " 人"
            }
          },
          {
            name: "人数完成率",
            type: "spline",
            data: [],
            tooltip: {
              valueSuffix: "%"
            }
          }
        ]
      }
    };
  },
  components: {},
  mounted() {},
  created() {},
  methods: {
    async init(projectID) {
      let res = await reqProjectByProvinceReport(projectID);
      if (res.code === 200) {
        this.options.xAxis[0].categories = res.data.legend;
        this.options.series[0].data = res.data.series[0].data;
        this.options.series[1].data = res.data.series[1].data;
        this.options.series[2].data = res.data.series[2].data;
        this.options.series[3].data = res.data.series[3].data;
        this.options.series[4].data = res.data.series[4].data;
        this.options.series[5].data = res.data.series[5].data;
        this.options.series[6].data = res.data.series[6].data;
        this.options.series[7].data = res.data.series[7].data;
        this.options.series[8].data = res.data.series[8].data;
        this.showChart();
      }
    },
    showChart() {
      if (this.chart) {
        this.chart.destroy();
      }
      this.chart = new Highcharts.Chart("reportProjectProvince", this.options);
    }
  }
};
</script>


<style lang="scss" scoped>
.h {
  text-align: center;
}
</style>